<template>
	<view>
		<view class="od-banner">
			<image class="od-banner-icon" src="/static/resource/images/od_bg_icon.png" mode="widthFix" />
			<view class="od-jd od-jd-0">
				<view class="od-jd-out">
					<view class="od-jd-in"></view>
				</view>
				<view class="vp-flex od-jd-text">
					<view class="vp-flex_1">
						<text class="od-jd-st-0">填写订单</text>
					</view>
					<view class="vp-flex_1">
						<text class="od-jd-st-10">在线支付</text>
					</view>
					<view class="vp-flex_1">
						<text class="od-jd-st-20">专人服务</text>
					</view>
					<view class="vp-flex_1">
						<text class="od-jd-st-30">服务完成</text>
					</view>
				</view>
			</view>
		</view>
		<view class="pub-box">
			<view class="pub-box-bd">
				<view class="weui-cell weui-cell_input">
					<view class="weui-cell__hd">
						<image class="serv-icon"
							:src="service?.icon_image ? service?.icon_image_url : '../../static/resource/images/avatar.jpg'">
						</image>
					</view>
					<view class="weui-cell__bd">
						<text class="serv-name">{{ service?.name }}</text>
					</view>
					<view class="weui-cell__ft">
						<view class="f5 ic_info" @click="handleTap">服务内容</view>
					</view>
				</view>
			</view>
		</view>
		<block v-if="service?.stype == 10 || service?.stype == 15 || service?.stype == 20">
			<view class="pub-box">
				<view class="pub-box-bd">
					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__hd">
							<view class="weui-label">所在医院</view>
						</view>
						<view class="weui-cell__bd"></view>
						<view class="weui-cell__ft weui-cell__ft_in-access">
							<view>
								<!-- <picker @change="onHospitalChange" mode="selector" :value="0" :range="hospitals"
			                                  range-key="name">
			                                <input type="text" :disabled="true" placeholder="请选择就诊所在医院"
			                                      :value="hospitals[hospital_index].name" placeholder-class="vp-placeholder" />
			                              </picker> -->
								<picker @change="bindPickerChange" range-key="name" :value="hospital_index"
									:range="hospitals">
									<input type="text" disabled placeholder="请选择就诊所在医院"
										:value="hospitals[hospital_index].name" placeholder-class="vp-placeholder" />
								</picker>
							</view>
						</view>
					</view>

					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__hd">
							<view class="weui-label">服务时间</view>
						</view>
						<view class="weui-cell__bd"></view>
						<view class="weui-cell__ft weui-cell__ft_in-access">
							<picker mode="date" :value="order.starttime"
								@change="bindDateChange">
								<input type="text" disabled placeholder="请选择服务时间"
									:value="order.starttime" placeholder-class="vp-placeholder" />
							</picker>
						</view>
					</view>

					<view class="weui-cell weui-cell_input" @click="onAddressChange">
						<view class="weui-cell__hd">
							<view class="weui-label">收件信息</view>
						</view>
						<view class="weui-cell__bd"></view>
						<view class="weui-cell__ft weui-cell__ft_in-access">
							<!-- <input class="weui-input" :disabled="true" style="text-align: right"
			                              placeholder-class="vp-placeholder" placeholder="请选择收件信息" :value="
			                                                              order.address.userName
			                                                                  ? order.address.userName + '(' + order.address.cityName + order.address.countyName + order.address.detailInfo + ')'
			                                                                  : ''
			                                                          " /> -->
							<!-- {{order.address?(order.address.userName+'('+order.address.telNumber+')'):''}} -->
						</view>
					</view>
					<view class="weui-cell weui-cell_input">
						<view class="weui-cell__hd">联系电话</view>
						<!-- <view class="weui-cell__bd">
			                          <input class="weui-input" type="number" name="tel" style="text-align: right"
			                              placeholder-class="vp-placeholder" placeholder="请填写您的联系电话" v-model="order.tel" />
			                      </view> -->
					</view>
				</view>
			</view>

			<view class="pub-box">
				<view class="pub-box-tt">服务需求</view>
				<view class="pub-box-bd">
					<view class="weui-cell weui-cell_input">
						<!-- <view class="weui-cell__bd">
			                          <textarea name="demand" auto-height placeholder="如有其他服务要求请在此填写.."
			                              placeholder-class="vp-placeholder" style="min-height: 150rpx" v-model="order.demand" />
			                      </view> -->
					</view>
				</view>
			</view>

		</block>

	</view>
</template>

<script setup>
	let app = getApp()
	// 服务数据
	const service = ref({})
	const hospitals = ref([])
	const hospital_index = ref(0)
	const order = reactive({
		starttime: '',
		price: '',
		address: {
			userName: '',
			cityName: '',
			countyName: '',
			detailInfo: ''
		}
	})
	onLoad((option) => {
		main_load(option)
	})
	const main_load = (option) => {
		app.globalData.Utils.request({
			url: '/Service/order',
			data: {
				svid: option.svid
			},
			success: (res) => {
				service.value = res.data.service
				hospitals.value = res.data.hospitals
				if(option.hid > 0) {
					// 自动选中
					let targetIndex = hospitals.value.findIndex(item => item.id == option.hid)
					hospital_index.value = targetIndex > 0 ? targetIndex : 0
					order.price = hospitals.value[targetIndex]?.service_price
				}
			}
		})
	}
	const bindPickerChange = (e) => {
		hospital_index.value = e.detail.value
	}
	const bindDateChange =  (e) => {
	            order.starttime = e.detail.value
	        }
</script>

<style scoped lang="css">
	@import './css/index.css';
</style>